/*
* @Author: 董洌淇
* @Date: 2020年10月20日14:20:57
* @Last Modified by: 董洌淇
* @Last Modified time: 2020年10月20日14:21:06
* @Description: 消息详情-标识，暂时无用
*/
<template>
	<view class="msg-details">
		<cu-custom bgColor="bg-blue" :isBack="true"><block slot="backText"></block><block slot="content">详情</block></cu-custom>
		<view class="msg-details-box">
			<view class="msg-details-content margin-t-20upx">
				<text>{{ msgContent }}</text>
			</view>
			<view class="msg-details-content margin-t-20upx">
				<view class="cu-bar cu-text">
					<view class="action">
						图片上传
					</view>
					<view class="action">
						{{imgList.length}} / 1
					</view>
				</view>
				<view class="cu-form-group">
					<textarea maxlength="-1" :disabled="modalName != null" @input="textareaAInput" placeholder="说点什么吧~"></textarea>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						 <image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="imgList.length < 1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding-xs text-lg">
			<button class="cu-btn block bg-blue margin-tb-sm lg" @click="submitData" :disabled="disabledStatus">
				<!-- <text class="cuIcon-loading2 cuIconfont-spin" v-if="disabledStatus">加载中</text> -->
				确认处理
			</button>
		</view>
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="/static/appicon-72.png" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	import { uploadFiles } from '@/utils/methods'
	import { setSolveAlarm } from '@/api/msgApi'
	export default {
		name: 'msgDetails',
		data() {
			return {
				loadModal: false, // loading状态
				disabledStatus: true, // 确认按钮状态
				msgId: '', // 当前此条数据ID
				msgContent: '', // 消息字段
				imgList: [], // 上传图片-本地路径列表
				imgUrl: '', // 上传图片服务器返回地址
				modalName: null,
				textareaAValue: ''
			}
		},
		onLoad(data) {
			this.msgContent = JSON.parse(data.msg).msg // 赋值详情文本
			this.msgId = JSON.parse(data.msg).id // 当前信息ID
		},
		methods: {
			// 展示图片
			ViewImage (e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			// 上传图片 - res返回图片本地路径
			ChooseImage () {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //拍摄/相册选择 camera相机 album相册
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths // 形成本地图片的blob对象
						}
						this.pushImg() // 调用上传blob对象至服务器
					}
				})
			},
			// 将chooseImg返回的本地图片路径blob对象上传到服务器
			pushImg () {
				let access_Token = uni.getStorageSync('uerInfo') // 获取token
				uni.uploadFile({
					url: uploadFiles(), // 图片服务器地址
					method: 'POST', // 请求类型
					filePath: this.imgList[0], // 上传文件
					name: 'file',
					header: {
						'Content-type': 'application/x-www-form-urlencoded',
						'Authorization': `Bearer ${access_Token.access_token}`
					},
					success: res => {
						let imgUrl = JSON.parse(res.data)
						if (imgUrl.code === 0) {
							this.imgUrl = imgUrl.data
						} else {
							uni.showToast({
								title: imgUrl.msg,
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			// 上传图片组件-删除图片提示内容
			DelImg (e) {
				uni.showModal({
					title: '温馨提示',
					content: '删除图片后将不被保存？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			// 多行文本框
			textareaAInput(e) {
				if (e.detail.value) {
					this.textareaAValue = e.detail.value
					this.disabledStatus = false
				} else {
					this.disabledStatus = true
				}
			},
			// 提交表单
			submitData () {
				this.loadModal = true
				let _tempParams = {
					eventId: this.msgId, // 当前信息ID
					image: [this.imgUrl], // 图片数组
					info: this.textareaAValue // 处理消息文本
				}
				setSolveAlarm(_tempParams).then(res => {
					if (res.data.code === 0) {
						uni.showToast({
							title: '处理成功!',
							icon: 'none',
							duration: 2000
						})
						this.loadModal = false
						this.disabledStatus = true
						// uni.navigateTo({
						//     url: './index'
						// })
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
						this.loadModal = false
					}
				}).catch(err => {
					this.loadModal = false
					uni.showToast({
						title: '服务器错误，请稍后尝试!',
						icon: 'none',
						duration: 2000
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg-details {
		.msg-details-box {
			background-color: $uni-bg-color-F7F7F7;
			height: 100%;
			.msg-details-content {
				background-color: $uni-bg-color;
				padding: 40upx 5% 40upx;
				.cu-form-group {
					border: none;
				}
				.cu-text {
					min-height: auto;
				}
			}
		}
	}
</style>
